<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书封面生成器</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #F8BBD0;
            --accent-color: #BBDEFB;
            --text-color: #424242;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f5f5f5;
            font-family: 'Noto Sans SC', sans-serif;
        }

        .canvas-container {
            width: 600px;
            height: 800px;
            background: linear-gradient(135deg, #F8BBD0 0%, #BBDEFB 100%);
            position: relative;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .content {
            padding: 40px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .main-title {
            font-size: 72px;
            font-weight: 700;
            color: var(--text-color);
            line-height: 1.2;
            text-shadow: 2px 2px 0 #fff;
            margin-bottom: 20px;
        }

        .highlight {
            color: #E91E63;
            -webkit-text-stroke: 2px #fff;
        }

        .subtitle {
            font-size: 36px;
            color: var(--text-color);
            opacity: 0.9;
            margin-bottom: 15px;
        }

        .steps {
            font-size: 24px;
            color: #666;
            line-height: 1.6;
        }

        .save-btn {
            position: absolute;
            bottom: 20px;
            right: 20px;
            padding: 12px 24px;
            background: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="canvas-container" id="coverCanvas">
        <div class="content">
            <h1 class="main-title">
                <span class="highlight">戒掉坏习惯</span><br>
                <span class="highlight">掌控习惯</span>
            </h1>
            <h2 class="subtitle">4步成为理想自我</h2>
            <p class="steps">
                <i class="fas fa-book-open"></i> 科学习惯养成法<br>
                <i class="fas fa-chart-line"></i> 行为心理学实践指南<br>
                <i class="fas fa-check-circle"></i> 可操作步骤解析
            </p>
        </div>
        <button class="save-btn" onclick="saveCover()">保存封面</button>
    </div>

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
        function saveCover() {
            html2canvas(document.querySelector("#coverCanvas"), {
                logging: true,
                useCORS: true,
                ignoreElements: (element) => element.classList.contains('save-btn')
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = 'cover.png';
                link.href = canvas.toDataURL();
                link.click();
            });
        }
    </script>
</body>
</html>